<template>
    <div class="search">
        <form action="/">
            <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
                @clear="onClear"
            />
        </form>

        <div class="history" v-show="isHis">
            <div class="t">
            <van-nav-bar left-text="历史搜索记录" @click-right="onClickRight" >
                <template #right>
                    <van-icon name="delete" size="18" color="#ccc" />
                </template>
            </van-nav-bar>
            </div>

            <div class="cont">
                <van-nav-bar v-for="(it,i) in arr" :key="it"  @click-left="onClickLeft(it)" @click-right="delHis(i)" >
                    <template #left>
                        <van-icon name="clock-o" size="18" color="#ccc" />
                        <span style="margin-left: 1.4rem;">{{ it }}</span>
                    </template>
                    <template #right>
                        <van-icon name="cross" size="18" color="#ccc" />
                    </template>
                </van-nav-bar>
            </div>
        </div>

        <div class="srcRes" v-show="!isHis">
            <div class="noFound" v-show="msg">{{ msg }}</div>
            <playList :fmList="fmList"></playList>
        </div>

    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import ajax from '../../apis/Ajax';
import playList from '../../components/playList.vue';

const router = useRouter()

const value:any = ref('')
const arr:any = ref([])
// 存储历史记录
const isHis:any = ref(true)
const fmList:any = ref([])
const msg:any = ref('')

function onSearch(val:any){
    isHis.value = false
    arr.value = arr.value || [];
    arr.value.push(val);
    // console.log(arr.value)
    localStorage.setItem('searchArr',JSON.stringify(arr.value));
    ajax({
        url:'/search',
        params:{
            info:val
        }
    }).then((data:any)=>{
        // console.log(data.rows)
        if (data.code===200) {
            fmList.value = data.data.rows
            msg.value = ''
        }else {
            fmList.value = []
            msg.value = data.msg
        }
        
    })
}
//跳转

function onClickLeft(i:any){
    isHis.value = false
    ajax({
        url:'/search',
        params:{
            info:i
        }
    }).then((data:any)=>{
        // console.log(data.rows)
        if (data.code===200) {
            fmList.value = data.data.rows
            msg.value = ''
        }else {
            fmList.value = []
            msg.value = data.msg
        }
    })
}

function onCancel(){
    console.log(333)
    router.push('/heart')  
}
//清除历史记录

function onClear(){
    isHis.value = true
}

function onClickRight(){
    localStorage.clear()
    arr.value = JSON.parse(localStorage.getItem('searchArr'))
}
//删除某条历史记录
function delHis(i:any){
    console.log(i);
    arr.value.splice(i,1)
    localStorage.setItem('searchArr',JSON.stringify(arr.value));
}

onMounted(() => {
    arr.value = JSON.parse(localStorage.getItem('searchArr'))
})

</script>

<style lang="less">
.search {
    position: relative;
    overflow-x: hidden;
    .van-nav-bar__text {
        color: #555;
    }
    .noFound {
        color: grey;
        font-size: 2rem;
        text-align: center;
        margin-top: 35vh;
    }
}
</style>